<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<style>
			p{margin-bottom: 10px;}
		</style>
	</head>
	<body>
		<h3>Radio&Checkbox 单选框&复选框</h3>

		<h4>单选框</h4>
		<section>
			<div class="example">
				<p>
					<label class="radio">
						<input type="radio" name="fruit1" value="apple" checked></input>
						<span>Apple</span>
					</label>
				</p>
				<p>
					<label class="radio">
						<input type="radio" name="fruit1" value="orange"></input>
						<span>Orange</span>
					</label>
				</p>
				<p>
					<label class="radio">
						<input type="radio" name="fruit1" value="grape"></input>
						<span>Grape</span>
					</label>
				</p>
				<p>
					<label class="radio">
						<input type="radio" name="fruit1" value="banana" disabled></input>
						<span>Banana</span>
					</label>
				</p>
			</div>
			<pre><code>
	&lt;p&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit1" value="apple" checked/&gt;
			&lt;span&gt;Apple&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;p&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit1" value="orange"/&gt;
			&lt;span&gt;Orange&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;p&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit1" value="grape"/&gt;
			&lt;span&gt;Grape&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;p&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit1" value="banana" disabled/&gt;
			&lt;span&gt;Banana&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
			</code></pre>
		</section>

		<h4>单选框组</h4>
		<section>
			<div class="example">
				<p>使用类<mark>.radio-group</mark>创建一组水平排列的单选框。</p>
				<div class="radio-group">
					<label class="radio">
						<input type="radio" name="fruit2" value="apple" checked></input>
						<span>Apple</span>
					</label>
					<label class="radio">
						<input type="radio" name="fruit2" value="orange"></input>
						<span>Orange</span>
					</label>
					<label class="radio">
						<input type="radio" name="fruit2" value="grape"></input>
						<span>Grape</span>
					</label>
					<label class="radio">
						<input type="radio" name="fruit2" value="banana" disabled></input>
						<span>Banana</span>
					</label>
				</div>
			</div>
			<pre><code>
	&lt;div class="radio-group"&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit2" value="apple" checked/&gt;
			&lt;span&gt;Apple&lt;/span&gt;
		&lt;/label&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit2" value="orange"/&gt;
			&lt;span&gt;Orange&lt;/span&gt;
		&lt;/label&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit2" value="grape"/&gt;
			&lt;span&gt;Grape&lt;/span&gt;
		&lt;/label&gt;
		&lt;label class="radio"&gt;
			&lt;input type="radio" name="fruit2" value="banana" disabled/&gt;
			&lt;span&gt;Banana&lt;/span&gt;
		&lt;/label&gt;
	&lt;/div&gt;
			</code></pre>
		</section>

		<h4>复选框</h4>
		<section>
			<div class="example">
				<p>
					<label class="checkbox">
						<input type="checkbox"></input>
						<span>初始</span>
					</label>
				</p>
				<p>
					<label class="checkbox">
						<input type="checkbox" checked></input>
						<span>选中</span>
					</label>
				</p>
				<p>
					<label class="checkbox">
						<input type="checkbox" disabled></input>
						<span>禁用</span>
					</label>
				</p>
			</div>
			<pre><code>
	&lt;p&gt;
		&lt;label class="checkbox"&gt;
			&lt;input type="checkbox"&gt;&lt;/input&gt;
			&lt;span&gt;初始&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;p&gt;
		&lt;label class="checkbox"&gt;
			&lt;input type="checkbox" checked&gt;&lt;/input&gt;
			&lt;span&gt;选中&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
	&lt;p&gt;
		&lt;label class="checkbox"&gt;
			&lt;input type="checkbox" disabled&gt;&lt;/input&gt;
			&lt;span&gt;禁用&lt;/span&gt;
		&lt;/label&gt;
	&lt;/p&gt;
			</code></pre>
		</section>

		<script>
		  $(document).ready(function() {
		    $('pre code').each(function(i, block) {
		      hljs.highlightBlock(block);
		    });
		  });
		</script>
	</body>
</html>